<template>
  <page-detail>
    <div style="padding: 10px">
      <van-skeleton :row="12" :loading="loading">
        <!-- 标题 -->
        <div class="title">{{ article.disputeTitle }}</div>
        <!-- 标签 -->
        <div class="tags">
          <article-tag :text="disputeName"/>
        </div>
        <!-- 日期 -->
        <div class="date">{{ article.createTime }}</div>
        <!-- 富文本内容 -->
        <rich-text class="content" :nodes="article.disputeContent"></rich-text>
        <!-- 图片列表 -->
        <div class="image-list">
          <img v-for="(img, index) in article.images"
               :key="index"
               :src="img"
               mode="aspectFill"
               class="image"
               @tap="$previewImage(article.images,index)"/>
        </div>
      </van-skeleton>
    </div>
    <template #footer>
      <van-button type="primary" text="分享给律师" @click="submit" round style="width: 200px"></van-button>
    </template>
    <law-modal ref="lawModal"/>
  </page-detail>
</template>

<script>
import ArticleTag from "../../components/ArticleTag.vue";
import {tbContradictionDisputeList} from "../../api/tbContradictionDispute";
import {putVideoAndImage} from "../../utils/utils";
import lawModal from "./components/lawModal.vue";
export default {
  name: 'wx_pages_fzbz_disputeDetail',
  components: {ArticleTag,lawModal},
  data() {
    return {
      article: {},
      disputeName:'',
      loading:false
    }
  },
  methods: {
    async search(){
      const {indexCode} = this.$route.query
      if(indexCode){
        this.loading = true
        let res = await tbContradictionDisputeList({indexCode})
        this.loading = false
        uni.stopPullDownRefresh()
        if(res.data && res.data.length>0){
          this.article = res.data.pop()
          const { disputePicUrl1, disputePicUrl2, disputePicUrl3 } = this.article;
          this.article.images = [disputePicUrl1, disputePicUrl2, disputePicUrl3]
              .filter(url => url && typeof url === 'string' && url.trim() !== '')
              .map(url => url.trim());
          this.article.disputeContent = putVideoAndImage(this.article.disputeContent)
        }else{
          this.article = {}
        }
      }
    },
    submit(){
      this.$refs.lawModal.showModal()
    }
  },
  onLoad(query) {
    this.disputeName = query.disputeName
    this.search()
  }
}
</script>
<style lang="scss">
.title {
  font-size: 18px;
  font-weight: bold;
  color:$uni-color-primary;
  margin-bottom: 12px;
  line-height: 1.4;
}

.tags {
  margin-bottom: 12px;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background: #68a67d;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 8px;
}
.date {
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
}

.content {
  margin-bottom: 16px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.image {
  width: 31%;
  height: 100px;
  border-radius: 4px;
}
</style>
